<template>
	<div id="app">
		<!-- 会员等级信息 -->
		<section class="member-level">
			<div class="level-info">
				<h2>普通会员</h2>
				<p>成长值0，再累计10可升级</p>
				<div class="level-stats">
					<div class="stat" @click="navigateToPoints">
						<span class="value">{{ memberInfo.points }}</span>
						<span class="label">我的积分 ></span>
					</div>
					<div class="stat" @click="navigateToBenefits">
						<span class="value">{{ memberInfo.benefitsCount }}</span>
						<span class="label">我的权益 ></span>
					</div>
					<div class="stat" @click="navigateToUpgrade">
						<span class="label">升级攻略</span>
						<span class="action">去升级 ></span>
					</div>
				</div>
			</div>
			<div class="level-icon">
				<!-- <img src="@/assets/member-icon.png" alt="会员图标"> -->
			</div>
		</section>

		<!-- 导航标签页 -->
		<section class="nav-tabs">
			<div class="tab" :class="{ active: currentTab === 'benefits' }" @click="currentTab = 'benefits'">
				专享权益
			</div>
			<div class="tab" :class="{ active: currentTab === 'welfare' }" @click="currentTab = 'welfare'">
				超值福利
			</div>
			<div class="tab" :class="{ active: currentTab === 'mall' }" @click="currentTab = 'mall'">
				积分商城
			</div>
		</section>

		<!-- 专享权益内容 -->
		<section v-if="currentTab === 'benefits'" class="benefits-content">
			<!-- 任务区域 -->
			<div class="task-section">
				<div class="section-header">
					<h2>做任务赚积分</h2>
					<span class="task-count" @click="navigateToTasks">64积分待领取 ></span>
				</div>

				<div class="task-list">
					<div class="task-item" v-for="(task, index) in taskList" :key="index">
						<div class="task-icon">
							<img :src="task.icon" alt="任务图标">
						</div>
						<div class="task-info">
							<span class="task-name">{{ task.name }}</span>
							<span class="task-bonus">{{ task.bonus }}积分</span>
						</div>
						<button class="task-button" :class="{ disabled: task.completed }" :disabled="task.completed"
							@click="completeTask(task)">
							{{ task.completed ? '已完成' : '去完成' }}
						</button>
					</div>
				</div>
			</div>

			<!-- 优惠券区域 -->
			<div class="coupon-section">
				<div class="section-header">
					<h2>寄件优惠</h2>
					<span class="coupon-action" @click="navigateToCoupons">领取记录 ></span>
				</div>

				<div class="coupon-list">
					<div class="coupon-item" v-for="(coupon, index) in couponList" :key="index">
						<div class="coupon-left">
							<span class="coupon-tag">{{ coupon.tag }}</span>
							<img :src="coupon.icon" alt="优惠券图标">
							<p>{{ coupon.title }}</p>
						</div>
						<button class="coupon-button"
							@click="coupon.received ? useCoupon(coupon) : receiveCoupon(coupon)">
							{{ coupon.received ? '去使用' : '领取' }}
						</button>
					</div>
				</div>
			</div>

			<!-- 品牌权益区域 -->
			<div class="brand-section">
				<div class="section-header">
					<h2>品牌权益</h2>
					<span class="brand-count">9个大牌福利待领取</span>
				</div>

				<div class="brand-list">
					<div class="brand-item" v-for="(brand, index) in brandList" :key="index">
						<img :src="brand.icon" alt="品牌图标">
						<p class="brand-name">{{ brand.name }}</p>
						<p class="brand-desc">{{ brand.desc }}</p>
						<button class="brand-button" :disabled="brand.received" @click="claimBrandBenefit(brand)">
							{{ brand.received ? '已领取' : '领取优惠 >' }}
						</button>
					</div>
				</div>
			</div>
		</section>

		<!-- 超值福利内容 (简化实现) -->
		<section v-else-if="currentTab === 'welfare'" class="welfare-content">
			<div class="empty-state">
				<p>超值福利内容即将上线</p>
			</div>
		</section>

		<!-- 积分商城内容 (简化实现) -->
		<section v-else-if="currentTab === 'mall'" class="mall-content">
			<div class="empty-state">
				<p>积分商城内容即将上线</p>
			</div>
		</section>
	</div>
</template>

<script>
	export default {
		name: 'MemberBenefits',
		data() {
			return {
				// 会员信息
				memberInfo: {
					points: 0, // 积分
					benefitsCount: 12, // 权益数量
					currentLevel: '普通会员', // 当前会员等级
					nextLevelThreshold: 10 // 升级所需成长值
				},

				// 当前激活的标签页
				currentTab: 'benefits',

				// 任务列表
				taskList: [{
						id: 1,
						name: '浏览积分抽奖页面',
						bonus: '+2',
						icon: '@/assets/task-icon1.png',
						completed: false
					},
					{
						id: 2,
						name: '用积分兑任意礼品',
						bonus: '+6',
						icon: '@/assets/task-icon2.png',
						completed: false
					}
				],

				// 优惠券列表
				couponList: [{
						id: 1,
						tag: '惊喜权益',
						icon: '@/assets/coupon-icon1.png',
						title: '5月礼包',
						received: false
					},
					{
						id: 2,
						tag: '注册有礼',
						icon: '@/assets/coupon-icon2.png',
						title: '788元\n寄件券包',
						received: true
					}
				],

				// 品牌权益列表
				brandList: [{
						id: 1,
						name: '同程旅行特惠',
						desc: '景区酒店用车 >',
						icon: '@/assets/brand-icon1.png',
						received: false
					},
					{
						id: 2,
						name: '网易严选',
						desc: 'Pro会员享免邮 >',
						icon: '@/assets/brand-icon2.png',
						received: false
					},
					{
						id: 3,
						name: '携程旅行',
						desc: '机票酒店折扣 >',
						icon: '@/assets/brand-icon3.png',
						received: false
					},
					{
						id: 4,
						name: '京东到家',
						desc: '满减优惠券 >',
						icon: '@/assets/brand-icon4.png',
						received: false
					}
				]
			}
		},
		methods: {
			// 导航相关方法
			navigateToPoints() {
				console.log('导航到积分页面');
				// 实际项目中使用路由跳转：this.$router.push('/points');
			},

			navigateToBenefits() {
				console.log('导航到权益页面');
				// 实际项目中使用路由跳转：this.$router.push('/benefits');
			},

			navigateToUpgrade() {
				console.log('导航到升级攻略页面');
				// 实际项目中使用路由跳转：this.$router.push('/upgrade-guide');
			},

			navigateToTasks() {
				console.log('导航到任务页面');
				// 实际项目中使用路由跳转：this.$router.push('/tasks');
			},

			navigateToCoupons() {
				console.log('导航到优惠券记录页面');
				// 实际项目中使用路由跳转：this.$router.push('/coupons');
			},

			// 任务相关方法
			completeTask(task) {
				if (task.completed) return;
				// 模拟API调用完成任务
				console.log(`完成任务: ${task.name}`);

				// 更新任务状态
				task.completed = true;

				// 更新积分
				this.memberInfo.points += parseInt(task.bonus);

				// 显示成功提示
				// this.$toast({
				// 	message: `获得 ${task.bonus} 积分！`,
				// 	duration: 2000
				// });
			},

			// 优惠券相关方法
			receiveCoupon(coupon) {
				if (coupon.received) return;

				// 模拟API调用领取优惠券
				console.log(`领取优惠券: ${coupon.title}`);

				// 更新优惠券状态
				coupon.received = true;

				// 显示成功提示
				// this.$toast({
				// 	message: '优惠券领取成功！',
				// 	duration: 2000
				// });
			},

			useCoupon(coupon) {
				console.log(`使用优惠券: ${coupon.title}`);
				// 实际项目中使用路由跳转：this.$router.push('/coupon/use/' + coupon.id);
			},

			// 品牌权益相关方法
			claimBrandBenefit(brand) {
				if (brand.received) return;

				// 模拟API调用领取品牌权益
				console.log(`领取品牌权益: ${brand.name}`);

				// 更新品牌权益状态	
				brand.received = true;

				// 显示成功提示
				// this.$toast({
				// 	message: `成功领取${brand.name}权益！`,
				// 	duration: 2000
				// });
			}
		}
	}
</script>

<style scoped>
	/* 基础样式 */
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	body {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		line-height: 1.5;
		color: #333;
		background-color: #f5f5f5;
	}

	/* 头部样式 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		padding: 0 16px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.header-left,
	.header-right {
		width: 40px;
		text-align: center;
	}

	.header-center {
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: 500;
	}

	.icon-back,
	.icon-more,
	.icon-eye {
		font-size: 20px;
		color: #333;
	}

	/* 会员等级样式 */
	.member-level {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.level-info {
		flex: 1;
	}

	.level-info h2 {
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 4px;
	}

	.level-info p {
		font-size: 12px;
		color: #666;
		margin-bottom: 12px;
	}

	.level-stats {
		display: flex;
		justify-content: space-between;
	}

	.stat {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.value {
		font-size: 18px;
		font-weight: 500;
	}

	.label {
		font-size: 12px;
		color: #666;
	}

	.action {
		font-size: 12px;
		color: #ff6600;
	}

	.level-icon {
		width: 60px;
		height: 60px;
	}

	.level-icon img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* 导航标签页样式 */
	.nav-tabs {
		display: flex;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 12px 0;
		font-size: 15px;
		color: #333;
		position: relative;
	}

	.tab.active {
		color: #ff6600;
		font-weight: 500;
	}

	.tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 30px;
		height: 2px;
		background-color: #ff6600;
	}

	/* 内容区域通用样式 */
	.benefits-content,
	.welfare-content,
	.mall-content {
		padding: 0 10px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
	}

	.section-header h2 {
		font-size: 16px;
		font-weight: 500;
	}

	.task-count,
	.coupon-action,
	.brand-count {
		font-size: 12px;
		color: #666;
	}

	/* 任务区域样式 */
	.task-section {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 10px;
		padding: 0 16px;
	}

	.task-list {
		padding-bottom: 12px;
	}

	.task-item {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #eee;
	}

	.task-item:last-child {
		border-bottom: none;
	}

	.task-icon {
		width: 40px;
		height: 40px;
		margin-right: 12px;
	}

	.task-icon img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.task-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.task-name {
		font-size: 14px;
	}

	.task-bonus {
		font-size: 12px;
		color: #ff6600;
	}

	.task-button {
		padding: 6px 12px;
		background-color: #ff6600;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 12px;
	}

	.task-button.disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	/* 优惠券区域样式 */
	.coupon-section {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 10px;
		padding: 0 16px;
	}

	.coupon-list {
		padding-bottom: 12px;
	}

	.coupon-item {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #eee;
	}

	.coupon-item:last-child {
		border-bottom: none;
	}

	.coupon-left {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.coupon-tag {
		padding: 2px 4px;
		background-color: #ff6600;
		color: #fff;
		font-size: 10px;
		border-radius: 2px;
		margin-right: 8px;
	}

	.coupon-item img {
		width: 50px;
		height: 50px;
		margin-right: 8px;
	}

	.coupon-item p {
		font-size: 14px;
	}

	.coupon-button {
		padding: 6px 12px;
		background-color: #ff6600;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 12px;
	}

	/* 品牌权益区域样式 */
	.brand-section {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 10px;
		padding: 0 16px;
	}

	.brand-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding-bottom: 12px;
	}

	.brand-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 12px;
		border: 1px solid #eee;
		border-radius: 8px;
	}

	.brand-item img {
		width: 60px;
		height: 60px;
		margin-bottom: 8px;
	}

	.brand-name {
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 4px;
	}

	.brand-desc {
		font-size: 12px;
		color: #666;
		margin-bottom: 8px;
	}

	.brand-button {
		width: 100%;
		padding: 6px 0;
		background-color: #fff;
		color: #ff6600;
		border: 1px solid #ff6600;
		border-radius: 4px;
		font-size: 12px;
	}

	.brand-button:disabled {
		background-color: #f5f5f5;
		color: #ccc;
		border-color: #ccc;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 300px;
		color: #999;
		font-size: 14px;
	}
</style>